<!--  -->
<template>
  <div class="home-bg padding-20">
    <scroll-box ref="scrollBox"></scroll-box>

    <div class="margin-bottom-20 flex justify-between">
      <manage-satae class="chart-box" pageType="operation" ref="manage"></manage-satae>
      <div class="split-line"></div>
      <capture-operate-state class="chart-box" ref="capture"></capture-operate-state>
    </div>

    <lease-operate v-if="systemType != 'businessBuildingOperate'"></lease-operate>

    <div class="tab-self-box padding-20 bg-color-fffff">
      <template v-for="item in tabList">
        <span v-if="item.show" :key="item.path" class="font-size-18 tab-txt cursor-pointer padding-right-50" :class="activeTab == item.path ? 'active-tab-color' : ''" @click="tabClick(item.path)">{{ item.title }}</span>
      </template>
    </div>
    <components ref="component" v-if="activeTab" :is="activeTab"></components>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import WorkTableEvent from '../../../modeules/workTableEvent.vue';
  import ManageSatae from '@c/homeChart/manageSatae.vue';
  import captureOperateState from '@c/homeChart/captureOperateState.vue';
  import LeaseOperateState from '@c/homeChart/leaseOperateState.vue';
  import LeaseOperate from '@c/homeChart/leaseOperate.vue';
  import scrollBox from '@c/scrollBox.vue';
  import fast from '../../../modeules/fast.vue';
  import room from './room.vue';
  import park from './park.vue';
  import advertise from './advertise.vue';
  export default {
    components: { WorkTableEvent, room, park, advertise, fast, ManageSatae, captureOperateState, LeaseOperateState, LeaseOperate, scrollBox },
    props: {
      pageType: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        tabList: [
          { title: '综合房态', show: this.$verifyPerms('room'), path: 'room' },
          { title: '广告位管理', show: this.$verifyPerms('advertise'), path: 'advertise' },
          { title: '停车场管理', show: this.$verifyPerms('park'), path: 'park' },
        ],
        activeTab: 'room',
        systemType: localStorage.getItem('systemType'),
      };
    },
    //方法集合
    methods: {
      TabMenuSelect(path) {
        console.log(path);
        this.activeTab = path;
      },
      tabClick(path) {
        this.activeTab = path;
      },
    },
  };
</script>
<style scoped lang="scss">
  .right-box {
    margin-left: 20px;
    width: 440px;
  }
  .satae-box {
    width: 600px;
  }
  .split-line {
    width: 20px;
    background: #f8f8f8;
  }
  .chart-box {
    width: 50%;
    height: 410px;
  }

  .shadow-box:hover {
    box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1);
  }
</style>
